<template>
  <div class="app-download">
    <div v-if="isMobile" class="app">
      <div class="img-logo">
        <img src="../../../public/img/app-login.png" alt="">
      </div>
      <div class="box">
        <p class="title">App简介</p>
        <p class="des">米立智能App是一个智能设备管理工具，通过米立智能APP，你可以控制家中的智能设备，使用场景，家庭管理等功能服务，体验智能生活。</p>
      </div>
      <button v-if="!disabledBtn" class="btn">
        <a v-if="isIOS" :href="appStoreUrl" target="_blank">立刻下载</a>
        <!-- <span v-else  :href="isAndroidUrl" :disabled="disabledBtn" @click="redirectToAppStoreOrDownload">立刻下载</span> -->
        <a v-else :href="isAndroidUrl" :disabled="disabledBtn" target="_blank">立刻下载</a>
      </button>
      <button v-else :disabled="disabledBtn" class="btn btn-disabled">立刻下载</button>
    </div>
    <div else class="pc">
      <div class="pc-box">
        <div id="qrcode" class="qr-code"></div>
        <p class="pc-des">请使用手机微信、相机或者浏览器扫描米立智能App</p>
      </div>
    </div>
    <div v-if="isWeChatBrowser" class="wechat-masking" @click="closePrompt">
      <div class="wechat" @click.stop>
        <div class="prompt">温馨提示：</div>
        <div class="content">
          <p>1、点击右上角菜单</p>
          <p>2、选择【在浏览器打开】</p>
        </div>
        <div class="close-btn" @click="closePrompt">关闭</div>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import { latestAndroidVersion } from '@/api/app/myapp'
export default {
  name: 'appDownload',
  data() {
    return {
      isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), // 判断是手机端还是电脑端，手机端 isMobile 为 true，电脑端 为 false
      isAndroid: false, // 是否是安卓
      isIOS: false, // 是否是ios
      apkUrl: '', // 应用的 APK 文件下载链接
      // appId: 'com.smart.cloud.live', // 应用在 App Store 中的唯一标识
      appStoreUrl: `https://apps.apple.com/cn/app/米立智能/id${6473011524}`, // 将应用的 App Store 链接格式化
      isAndroidUrl: 'https://smart.miligc.com:30900/app/pubilc/android/mili_smart_latest.apk', // android 应用商店下载链接
      isWeChatBrowser: false
    }
  },
  computed: {
    disabledBtn() {
      const flag = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
      return flag
    }
  },
  mounted() {
    const userAgent = navigator.userAgent.toLowerCase()
    this.isAndroid = /android/.test(userAgent) // 如果是 Android 设备，isAndroid 将为 true
    this.isIOS = /iphone|ipad|ipod|ios/.test(userAgent) // 如果是 iOS 设备，isIOS 将为 true

    this.latestAndroidVersion()

    let location = window.location.hostname === '10.111.115.183' ? `http://${window.location.hostname}:81/#/appDownload` : `https://${window.location.hostname}/#/appDownload`
    // 在DOM中生成二维码
    new QRCode('qrcode', {
      text: location,
      width: 294,
      height: 294
    })

    this.isWeChatBrowser = (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1)
  },
  methods: {
    // 安卓最新版本apk
    latestAndroidVersion() {
      latestAndroidVersion().then(res => {
        this.apkUrl = res.data.data.url
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 关闭微信提示弹窗
    closePrompt() {
      this.isWeChatBrowser = false
    }
    // app下载
    // redirectToAppStoreOrDownload() {
    //   // 最多等待2秒，如果打开应用商店失败，则跳转到 APK 下载链接
    //   // try {
    //   //   const packageName = 'com.smart.cloud.live'
    //   //   const playStoreUrl = `market://details?id=${packageName}`
    //   //   window.location.href = playStoreUrl
    //   // } catch (err) {
    //   //   window.location.href = this.apkUrl
    //   // }

    //   // const packageName = 'https://www.pgyer.com/mili-3a-stable'
    //   // const playStoreUrl = `market://details?id=${packageName}`
    //   const playStoreUrl = `https://www.pgyer.com/mili-3a-stable`
    //   // 延迟一段时间后检查是否跳转成功
    //   setTimeout(function() {
    //     if (!(document.hidden || document.webkitHidden)) {
    //       // 跳转失败apk下载
    //       window.location.href = this.apkUrl
    //     }
    //   }, 2000) // 延迟时间可根据实际情况进行调整
    // }
  }
}
</script>
<style lang="scss" scoped>
.app-download {

  .app {
    position: relative;
    height: 100vh;
    padding: 0 24px;
    background: #F1F3F5;

    .img-logo {
      padding-top: 160px;
      text-align: center;

      img {
        width: 84px;
        height: 84px;
      }
    }

    .title {
      font-size: 18px;
      font-weight: 500;
      color: #000000;
      height: 25px;
      line-height: 25px;
      margin-top: 32px;
      margin-bottom: 8px;
      text-align: center;
    }

    .des {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4);
      text-indent: 2em;
    }

    .btn {
      width: calc(100% - 48px);
      height: 48px;
      line-height: 48px;
      background: #2C67FD;
      border-radius: 8px;
      font-size: 20px;
      font-weight: 500;
      position: fixed;
      left: 24px;
      bottom: 53px;
      border: none;

      a,
      span {
        color: #FFFFFF;
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .btn-disabled {
      background: #CED5E7;
      color: #ffffff;
    }
  }

  .pc {
    text-align: center;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    position: relative;

    .pc-box {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .qr-code {
      width: 294px;
      height: 294px;
      text-align: center;
    }

    .pc-des {
      font-size: 24px;
      color: #FFFFFF;
    }
  }

  .qr-code ::v-deep img {
    position: absolute;
    top: 46%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .wechat-masking {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;

    .wechat {
      width: calc(100% - 24px);
      background: #FFFFFF;
      border-radius: 12px;
      position: absolute;
      top: 12px;
      margin: 0 12px;
      padding: 16px;
      box-sizing: border-box;

      .prompt {
        font-size: 20px;
        font-weight: 500;
        color: #000000;
        height: 28px;
        line-height: 28px;
      }

      .content {
        font-size: 16px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4);

        p {
          height: 22px;
          line-height: 22px;
        }
      }

      .close-btn {
        height: 48px;
        line-height: 48px;
        border-radius: 8px;
        opacity: 0.3;
        border: 1px solid #000000;
        text-align: center;
      }
    }
  }
}
</style>
